<script>
import {mapState} from "vuex";

export default {
  name: 'EducationEditor',
  props: {
    modelValue: {
      type: Array,
      default: () => []
    },
  },
  computed: {
    ...mapState(['schools']),
    localValue: {
      get() {
        return this.modelValue
      },
      set(val) {
        this.updateValue(val)
      }
    }
  },
  methods: {
    getIcon(id) {
      const idx = this.schools.findIndex((s) => s.id === id)
      return this.schools[idx].logo
    },
    updateValue(val) {
      this.$emit('update:modelValue', val)
    },
    deleteIt() {
      this.$emit('deleted')
    },
    insert(val) {
      const nv = this.modelValue
      nv.push(val)
      this.updateValue(nv)
    },
    remove(idx) {
      const nv = this.modelValue
      nv.splice(idx, 1)
      this.updateValue(nv)
    },
    addEducation() {
      this.insert({})
    }
  }
}
</script>

<template>
  <div>
    <div v-for="(edu,idx) in localValue" :key="idx">
      <div class="border py-5 mt-2 flex px-4 rounded-md">
        <div class="p-2 grid grid-cols-4 w-full">
          <div class="">
            <div class="text-gray-400">学位</div>
            <el-select size="large"  default-first-option v-model="edu.level">
              <el-option value="本科">本科</el-option>
              <el-option value="研究生">研究生</el-option>
              <el-option value="博士">博士</el-option>
              <el-option value="大专">大专</el-option>
              <el-option value="其他">其他</el-option>
            </el-select>
          </div>
          <div class="ml-2">
            <div class="text-gray-400">学校</div>
            <el-select size="large" v-model="edu.school_id">
              <el-option v-for="(school, idx) in schools" :key="idx" :label="school.name" :value="school.id">
                <template #default>
                  <div class="flex items-center">
                    <img class="w-[25px] h-[25px]" :src="school.logo"/>
                    <div class="ml-2">{{school.name}}</div>
                  </div>
                </template>
              </el-option>
              <template #label="{label,value}">
                <div class="flex items-center">
                  <img class="w-[30px] h-[30px] object-cover" :src="getIcon(value)" alt="">
                  <div class="ml-2">{{ label }}</div>
                </div>
              </template>
            </el-select>
          </div>
          <div class="ml-2">
            <div class="text-gray-400">毕业时间</div>
            <el-date-picker v-model="edu.timespan" type="monthrange" size="large" range-separator="到"/>
          </div>
          <div class="ml-[50px]">
            <div class="text-gray-400">专业</div>
            <el-input size="large" v-model="edu.major"/>
          </div>
        </div>
        <el-button icon="Delete" text/>
      </div>
    </div>
    <div class="flex justify-center">
      <el-button @click="addEducation" icon="Plus" circle class="mt-5"/>
    </div>
  </div>
</template>

<style scoped>

</style>